<template>
  <div class="dashboard-container">
    <div class="dashboard-text">你好: {{ account }}</div>

    <div style="display: flex; margin-top: 20px; height: 100px; margin-left: 25%">
      <transition name="el-zoom-in-center">
        <div v-show="getinfo_flag" class="transition-box">项目: {{ total.project_total }}</div>
      </transition>

      <transition name="el-zoom-in-center">
        <div v-show="getinfo_flag" class="transition-box">模块: {{ total.module_total }}</div>
      </transition>

      <transition name="el-zoom-in-center">
        <div v-show="getinfo_flag" class="transition-box">用例: {{ total.case_total }}</div>
      </transition>

      <transition name="el-zoom-in-center">
        <div v-show="getinfo_flag" class="transition-box">套件: {{ total.suite_total }}</div>
      </transition>
    </div>

    <div
      id="homeChart"
      class="echart"
      :style="homeChartStyle"
      style="margin-top: 100px;"
    />
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { dashboardStat } from '@/api/stat/dashboard.js'

export default {
  name: 'Dashboard',
  // computed: {
  //   account = this.getLocalValue("account")
  //   // ...mapGetters([
  //   //   'account'
  //   // ])
  // },
  data() {
    return {
      getinfo_flag: false,
      account: '',
      total: {
        project_total: 0,
        module_total: 0,
        case_total: 0,
        suite_total: 0,
        xDate: [], // ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], // 横坐标
        yData: [], // ['15', '60', '90', '100', '50', '60', '70'],
        yFailedData: [], // [123, 124, 118, 125, 127, 128, 125], // 失败用例
        ySuccessDate: [] // [1110, 1111, 1119, 1117, 1114, 1113, 1314], // 成功用例
      },
      homeChartStyle: { float: 'left', width: '100%', height: '400px' } // 图表样式
    }
  },
  // created() {
  //   this.getData()
  // },
  mounted() {
    this.home_init()
    this.account = this.getLocalValue('account')
  },
  methods: {
    initEcharts() {
      // 多列柱状图
      const mulColumnZZTData = {
        xAxis: {
          data: this.total.xDate
        },
        // 图例
        legend: {
          data: ['失败用例', '成功用例', '成功率'],
          top: '0%'
        },
        yAxis: [
          {
            name: '个数',
            type: 'value',
            show: true,
            position: 'left',
            splitNumber: 5,
            axisTick: {
              show: false
            }
          },
          {
            name: '成功率(%)',
            type: 'value',
            show: true,
            min: 0,
            max: 100,
            position: 'right',
            splitNumber: 10,
            axisLine: {
              show: true
            },
            axisTick: {
              show: true
            }
          }

        ],
        series: [
          {
            name: '失败用例', // legend属性
            type: 'bar', // 形状为柱状图
            data: this.total.yFailedData,
            label: {
              // 柱状图上方文本标签，默认展示数值信息
              show: true,
              position: 'top'
            },
            itemStyle: {
              color: '#730707',
              shadowColor: '#f80303',
              borderType: 'dashed',
              opacity: 1
            }
          },
          {
            name: '成功用例', // legend属性
            type: 'bar', // 形状为柱状图
            data: this.total.ySuccessDate,
            label: {
              // 柱状图上方文本标签，默认展示数值信息
              show: true,
              position: 'top'
            },
            itemStyle: {
              color: '#305701',
              shadowColor: '#185701',
              borderType: 'dashed',
              opacity: 1
            }
          },
          {
            name: '成功率',
            type: 'line',
            yAxisIndex: 1,
            data: this.total.yData
          }
        ],
        tooltip: { // 鼠标悬浮提示框显示 X和Y 轴数据
          trigger: 'axis',
          backgroundColor: 'rgba(32, 33, 36,.7)',
          borderColor: 'rgba(32, 33, 36,0.20)',
          borderWidth: 1,
          textStyle: { // 文字提示样式
            color: '#fff',
            fontSize: '12'
          },
          axisPointer: { // 坐标轴虚线
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        }
      }
      const homechart = echarts.init(document.getElementById('homeChart'))
      homechart.setOption(mulColumnZZTData)
      // 随着屏幕大小调节图表
      window.addEventListener('resize', () => {
        homechart.resize()
      })
    },
    getData() {
      return new Promise((resolve, reject) => {
        dashboardStat().then(response => {
          this.getinfo_flag = response.success

          this.total.project_total = response.results.project_total
          this.total.module_total = response.results.module_total
          this.total.case_total = response.results.case_total
          this.total.suite_total = response.results.suite_total

          this.total.xDate = response.results.total.date
          this.total.yFailedData = response.results.total.fail
          this.total.ySuccessDate = response.results.total.pass
          this.total.yData = response.results.total.percent

          this.initEcharts()

          resolve(response)
        }).catch(e => {
          reject(e)
        })
      })
    },
    async home_init() {
      echarts.init(document.getElementById('homeChart')).showLoading()
      const homechart = echarts.init(document.getElementById('homeChart'))

      await dashboardStat().then(response => {
        this.getinfo_flag = response.success

        this.total.project_total = response.results.project_total
        this.total.module_total = response.results.module_total
        this.total.case_total = response.results.case_total
        this.total.suite_total = response.results.suite_total

        this.total.xDate = response.results.total.date
        this.total.yFailedData = response.results.total.fail
        this.total.ySuccessDate = response.results.total.pass
        this.total.yData = response.results.total.percent

        echarts.init(document.getElementById('homeChart')).hideLoading()
        const option = {
          xAxis: {
            data: this.total.xDate
          },
          // 图例
          legend: {
            data: ['失败用例', '成功用例', '成功率'],
            top: '0%'
          },
          yAxis: [
            {
              name: '个数',
              type: 'value',
              show: true,
              position: 'left',
              splitNumber: 5,
              axisTick: {
                show: false
              }
            },
            {
              name: '成功率(%)',
              type: 'value',
              show: true,
              min: 0,
              max: 100,
              position: 'right',
              splitNumber: 10,
              axisLine: {
                show: true
              },
              axisTick: {
                show: true
              }
            }

          ],
          series: [
            {
              name: '失败用例', // legend属性
              type: 'bar', // 形状为柱状图
              data: this.total.yFailedData,
              label: {
                // 柱状图上方文本标签，默认展示数值信息
                show: true,
                position: 'top'
              },
              itemStyle: {
                color: '#730707',
                shadowColor: '#f80303',
                borderType: 'dashed',
                opacity: 1
              }
            },
            {
              name: '成功用例', // legend属性
              type: 'bar', // 形状为柱状图
              data: this.total.ySuccessDate,
              label: {
                // 柱状图上方文本标签，默认展示数值信息
                show: true,
                position: 'top'
              },
              itemStyle: {
                color: '#305701',
                shadowColor: '#185701',
                borderType: 'dashed',
                opacity: 1
              }
            },
            {
              name: '成功率',
              type: 'line',
              yAxisIndex: 1,
              data: this.total.yData
            }
          ],
          tooltip: { // 鼠标悬浮提示框显示 X和Y 轴数据
            trigger: 'axis',
            backgroundColor: 'rgba(32, 33, 36,.7)',
            borderColor: 'rgba(32, 33, 36,0.20)',
            borderWidth: 1,
            textStyle: { // 文字提示样式
              color: '#fff',
              fontSize: '12'
            },
            axisPointer: { // 坐标轴虚线
              type: 'cross',
              label: {
                backgroundColor: '#6a7985'
              }
            }
          }
        }
        homechart.setOption(option)

        // 随着屏幕大小调节图表
        window.addEventListener('resize', () => {
          homechart.resize()
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}

.transition-box {
  margin-bottom: 10px;
  width: 200px;
  height: 100px;
  border-radius: 4px;
  background-color: #409EFF;
  text-align: center;
  color: #fff;
  padding: 40px 20px;
  box-sizing: border-box;
  margin-right: 20px;
}
</style>
